import React from "react";
import styles from "./less/index.less"
import ProgressBar from "@/pages/AboutMe/Components/ProfessionalSkills/ProgressBar";

const ProfessionalSkills = (props: { showOrHiddenProfessionalSkills: boolean }) => {
    const initBar = () => {
        const barArray = [{
            progress: 0.85,
            barColor: "linear-gradient(to right, #64B5F6 0%, #1976D2 100%)",
            name: "JavaScript"
        }, {
            progress: 0.7,
            barColor: "linear-gradient(to right, #4CAF50 0%, #81C784 100%)",
            name: "TypeScript"
        }, {
            progress: 0.85,
            barColor: "linear-gradient(to right, #9900FF 0%, #CC66FF 100%)",
            name: "Html+Css"
        }, {
            progress: 0.85,
            barColor: "linear-gradient(to right, #64B5F6 0%, #1976D2 100%)",
            name: "React、Angular、Vue"
        }, {
            progress: 0.6,
            barColor: "linear-gradient(to right, #58D68D 0%, #239B56 100%)",
            name: "计算机基础知识"
        }]
        let tempArray: Array<React.ReactNode> = []
        barArray.forEach(item => {
            tempArray.push(
                <div className={styles["progress-bar-box"]}>
                    <ProgressBar progress={item.progress} barColor={item.barColor}
                                 name={item.name}></ProgressBar>
                </div>
            )
        })
        return tempArray;
    }
    return <div
        className={`${styles["container"]} ${styles[props.showOrHiddenProfessionalSkills ? "show-container" : ""]}`}>
        <div className={styles["title"]}><span className={"iconfont icon-editor2"}></span>我的技能</div>
        <div className={styles["content"]}>
            {initBar()}
        </div>
    </div>
}
export default ProfessionalSkills;